<template>
  <div class="share-modal">
    <a-modal
      :open="visible"
      :footer="false"
      @cancel="closeModal"
      :width="500"
      :maskClosable="false"
    >
      <template #title>
        <h2 style="text-align: center; font-weight: bold">{{ props.title }}</h2>
      </template>

      <!-- 信息展示区域 -->
      <div class="show-info">
        <!-- 展示图片创建人和创建时间 -->
        <div class="share-info">
          <a-space>
            <a-avatar :src="user?.userAvatar" :size="22">
              <template #icon v-if="!user?.userAvatar">
                <UserOutlined />
              </template>
            </a-avatar>
            <h4 style="margin-top: 12px">
              {{ user?.userName ?? '未知' }}：{{
                dayjs(picture.createTime ?? '--').format('YYYY-MM-DD HH:mm:ss')
              }}
            </h4>
          </a-space>
        </div>

        <!-- 展示图片缩略图 -->
        <div style="text-align: center; margin-bottom: 12px">
          <a-image v-if="picture?.url" :src="picture?.url" height="160px" width="240px" class="picture-thumbnail">
          </a-image>
        </div>

        <!-- 分享内容容器 -->
        <div class="share-content">
          <!-- 二维码分享区域 -->
          <div class="share-qrcode-section">
            <!-- 二维码容器，居中显示并添加边框 -->
            <div class="qrcode-container">
              <a-qrcode :value="link" :size="160" />
            </div>
            <!-- 二维码下方提示文字 -->
            <p class="qrcode-desc">请使用手机扫码访问分享内容</p>
            <a-space class="loginUser-info">
              <a-avatar :src="loginUser?.userAvatar" :size="22">
                <template #icon v-if="!user?.userAvatar">
                  <UserOutlined />
                </template>
              </a-avatar>
              <h4 style="margin-top: 10px">
                由 {{ loginUser?.userName ?? '未知' }} 分享
              </h4>
            </a-space>
          </div>
        </div>
      </div>

      <!-- 按钮展示区域 -->
      <div class="share-button">
        <a-space>
          <!-- 复制链接按钮 - 改为浅绿色 -->
          <a-button @click="doCopyLink" class="action-button copy-button">复制链接</a-button>
          <!-- 保存图片按钮 - 改为深蓝色 -->
          <a-button @click="doSavePic" class="action-button save-button">保存图片</a-button>
        </a-space>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, withDefaults, defineExpose, onMounted } from 'vue'
import { UserOutlined } from '@ant-design/icons-vue'
import dayjs from 'dayjs'
import { useLoginUserStore } from '@/stores/userLogin'
import { message } from 'ant-design-vue'
import { downloadImage } from '@/util'

/**
 * 定义组件属性类型
 */
interface Props {
  title: string
  link: string
  user: API.UserVO
  picture: API.PictureVO
}

/**
 * 给组件指定初始值
 */
const props = withDefaults(defineProps<Props>(), {
  title: () => '分享',
  link: () => 'https://gitee.com/hy040911',
  user: () => ({}), // 修复：提供默认空对象，避免 undefined
  picture: () => ({}) // 修复：提供默认空对象
})

// 是否可见
const visible = ref(false)

// 打开弹窗
const openModal = () => {
  visible.value = true
}

// 关闭弹窗
const closeModal = () => {
  visible.value = false
}

// 暴露函数给父组件
defineExpose({
  openModal
})

// --------- 当前登录用户信息 -----------
const loginUser = ref<API.UserVO>()
const getLoginUser = () => {
  loginUser.value = useLoginUserStore().loginUser
}

// 页面挂载时获取当前登录用户信息
onMounted(() => {
  getLoginUser()
})

// 复制链接
const doCopyLink = () => {
  navigator.clipboard.writeText(props.link)
  message.success('链接已复制到剪贴板')
}

// 保存图片
const doSavePic = () => {
  downloadImage(props.picture.url)
  message.success('图片已保存')
}

</script>

<style scoped>
/* 模态框整体样式 */
.share-modal {
  /* 调整模态框内边距，让内容更舒展 */
  min-width: 1200px !important;
  padding: 20px;
}

/* 信息展示区域 */
.show-info {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); /* 加深阴影 */
}

/* 分享内容容器 */
.share-content {
  /* 内部元素垂直排列并添加间距 */
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: center;
}

/* 头像信息区域 - 添加深色阴影 */
.share-info {
  text-align: center;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 6px;
}

/* 图片缩略图容器 - 添加深色阴影 */
.picture-thumbnail {
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* 二维码分享区域 */
.share-qrcode-section {
  /* 内部元素垂直排列并居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
}

/* 二维码容器 - 加深阴影 */
.qrcode-container {
  /* 二维码添加白色背景和阴影，提升立体感 */
  padding: 12px;
  border-radius: 8px;
  transition: box-shadow 0.2s ease, transform 0.2s ease; /* 增加变换过渡 */
}

/* 二维码容器 hover 效果 - 增强阴影和微小上浮 */
.qrcode-container:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); /* 进一步加深阴影 */
  transform: translateY(-2px); /* 轻微上浮 */
}

/* 二维码描述文字 */
.qrcode-desc {
  /* 描述文字样式，灰色不抢眼 */
  margin: 0 auto;
  color: #6b7280;
  font-size: 14px;
  text-align: center;
}

/* 头像信息区域 */
.loginUser-info {
  text-align: center;
  padding: 6px 10px;
  border-radius: 6px;
}

/* 按钮展示区域 */
.share-button {
  margin-top: 6px;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
}

/* 按钮基础样式 - 通用动画与阴影 */
.action-button {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); /* 按钮初始深色阴影 */
  transition: all 0.3s ease; /* 动画过渡效果 */
  border-radius: 6px; /* 优化圆角 */
  font-weight: 500; /* 文字稍粗 */
  border: none; /* 去除默认边框 */
}

/* 按钮划入效果 - 上浮与加深阴影 */
.action-button:hover {
  transform: translateY(-3px); /* 上浮效果 */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* 加深阴影 */
}

/* 复制链接按钮 - 浅绿色样式 */
.copy-button {
  background-color: #52c41a; /* 浅绿色背景 */
  color: #fff; /* 白色文字 */
}

/* 复制按钮hover效果 - 颜色稍深 */
.copy-button:hover {
  background-color: #4aa919; /* 深一点的绿色 */
  color: #fff; /* 保持白色文字 */
}

/* 保存图片按钮 - 深蓝色样式 */
.save-button {
  background-color: #1890ff; /* 深蓝色背景 */
  color: #fff; /* 白色文字 */
}

/* 保存按钮hover效果 - 颜色稍深 */
.save-button:hover {
  background-color: #096dd9; /* 深一点的蓝色 */
  color: #fff; /* 保持白色文字 */
}

/* 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 修复 Ant Design Vue 组件样式冲突 */
:deep(.ant-typography-copy) {
  /* 调整复制按钮位置 */
  margin-left: 8px;
}

:deep(.ant-modal-title) {
  /* 标题加粗 */
  font-weight: 600;
}
</style>
